<template name="trailerStars">
	<view class="movie-score-wapper">
		<!-- #ifdef H5 -->
		<image src="../static/icos/star-yellow.png" class="star-ico" v-for="yellow in yellowScore"></image>
		<image src="../static/icos/star-gray.png" class="star-ico" v-for="gray in grayScore"></image>
		<!-- #endif -->
		
		<!-- #ifdef MP -->
		<image src="../static/icos/star-yellow.png" class="star-ico" v-for="yellow in yellowScore" :key="index"></image>
		<image src="../static/icos/star-gray.png" class="star-ico" v-for="gray in grayScore" :key="index"></image>
		<!-- #endif -->
		
		<view class="movie-score" v-if="showNum">
			{{innerScore}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"trailerStars",
		data() {
			return {
				yellowScore:0,
				grayScore:5
			};
		},
		props:{
			// 定义外部传入的分数
			innerScore:0,
			// 是否需要显示分值，1显示，0不显示
			showNum:0,
		},
		// 生命周期，组件创建完成后被调用
		created(){
			// console.log(this.innerScore)
			var tempScore = 0;
			if(this.innerScore != null && this.innerScore != undefined && this.innerScore != ""){
				tempScore = this.innerScore;
			}
			
			var yellowScore = parseInt(tempScore / 2);
			var grayScore = 5 - yellowScore;
			// console.log(tempScore, yellowScore,grayScore)
			this.yellowScore = yellowScore;
			this.grayScore = grayScore;
		}
	}
</script>

<style>
	.movie-score-wapper{
		display: flex;
		flex-direction: row;
	}

	.star-ico{
		width: 20rpx;
		height: 20rpx;
		margin-top: 6rpx;
	}

	.movie-score{
		font-size: 20rpx;
		margin-left: 10rpx;
		color: #808080;
	}
</style>
